const token = localStorage.getItem('token')
const uname = document.querySelector('.mb-0.text-sm.font-weight-bold.username')
uname.innerHTML = localStorage.getItem('uname')
let gender = ''
// 渲染页面
async function getdata() {
    let res = await axios({
        url: '/students',

    })
    // console.log(res.data.data)
    // 这个字符串变量写在渲染页面函数里面，如果写在外面做成全局变量，
    // 渲染页面的时候每次循环都会执行一次，导致渲染出来的页面一直都是最后一个数据，
    // 不会发生改变
    let str = ''
    res.data.data.forEach((item, index) => {
        genders(item)
        str += `
            <tr>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${gender}</td>
                    <td>第${item.group}组</td>
                    <td>${item.hope_salary}</td>
                    <td>${item.salary}</td>
                    <td>${item.province}${item.city}${item.area}</td>
                    <td>
                    <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
                    <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
                    </td>
            </tr>
        `
        document.querySelector('.list').innerHTML = str
        document.querySelector('.total').innerHTML = res.data.data.length
    })

}

// 删除功能
document.querySelector('.list').addEventListener('click', async function (e) {
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        // console.log(e.target.dataset.id)
        let res = await axios({
            url: '/students/' + id,
            method: 'DELETE',
            headers: {
                Authorization: token
            }
        })
        getdata()
        // location.reload()
    }

})


// console.log(document.querySelector('#logout'))
// 做右上角退出
logout()

// 新增功能
document.querySelector('#openModal').addEventListener('click', function (e) {
    e.preventDefault()
    // 显示弹框
    const modalDom = document.querySelector('#modal')
    const modal = new bootstrap.Modal(modalDom)
    modal.show()
    const form = document.querySelector('#form')
    // 获取表单数据
    getProvince()

})

const province = document.querySelector('[name=province]')
const city = document.querySelector('[name=city]')
const area = document.querySelector('[name=area]')
// 点击添加按钮获取表单数据并提交数据
document.querySelector('#submit').addEventListener('click', function (e) {
    e.preventDefault()
    // 提交数据并渲染
    let getforms = getform()
    getadd(getforms)
    getdata()
})


// 获取省市区数据
async function getProvince() {
    let res = await axios({
        url: '/api/province'
    })
    console.log(res)
    res.data.list.map(item => {
        province.innerHTML += `<option value="${item}">${item}</option>`
    })


}
// 选中省份的时候，获取对应的城市
province.addEventListener('change', function () {
    // 获取当前选中的option的value
    const pname = province.value;
    getCity(pname)
});



// 获取城市的数据
async function getCity(pname) {
    let res = await axios({
        url: '/api/city',
        params: {
            pname
        }
    })
    console.log(res)
    res.data.list.map(item => {
        city.innerHTML += `<option value="${item}">${item}</option>`
    })
}
// 选择城市的时候，获取对应的区
city.addEventListener('change', function () {
    // 获取当前选中的option的value
    const cname = city.value;
    const pname = province.value;
    getArea(pname, cname)
});

// 获取区的数据
async function getArea(pname, cname) {
    let res = await axios({
        url: '/api/area',
        params: {
            pname, cname
        }
    })
    console.log(res)
    res.data.list.map(item => {
        area.innerHTML += `<option value="${item}">${item}</option>`
    })
}

// 提交数据功能
async function getadd(arr) {
    let res = await axios({
        url: '/students',
        method: 'POST',
        data: arr
    })
    console.log(res)
    if (res.status === 201) {
        pxmu.toast('添加成功')
        // 关闭弹框
        const modalDom = document.querySelector('#modal')
        const modal = bootstrap.Modal.getInstance(modalDom)
        modal.hide()
    } else {
        pxmu.toast('添加失败')
    }

}

// 获取表单数据
function getform() {
    let formdata = serialize(form, { hash: true, empty: true })
    console.log(formdata.name)
    return {
        name: formdata.name,
        age: +formdata.age,
        gender: +formdata.gender,
        province: formdata.province,
        city: formdata.city,
        area: formdata.area,
        hope_salary: +formdata.hope_salary,
        salary: +formdata.salary,
        group: +formdata.group,

    }
}











// 用gender的01来判断性别
function genders(item) {
    if (item.gender == 1) {
        gender = '男'
    } else {
        gender = '女'
    }
}
getdata()
